<template>
  <div class="profit df fd-c">
    <div class="profit_top df">
      <profit-1></profit-1>
      <profit-2></profit-2>
      <profit-3></profit-3>
    </div>
    <div class="profit_button df">
      <profit-4></profit-4>
      <profit-5></profit-5>
    </div>
  </div>
</template>

<script>
import profit1 from "@/components/profit1.vue";
import Profit2 from "@/components/profit2.vue";
import Profit3 from "@/components/profit3.vue";
import Profit4 from '@/components/profit4.vue';
import Profit5 from '@/components/profit5.vue';
export default {
  components: { profit1, Profit2, Profit3, Profit4, Profit5 },
};
</script>

<style lang="scss" scoped>
.profit {
  width: 100%;
  // height: 100%;
  // height: calc(100% - 70px);
  height: calc(100vh - 70px);
  background: url(../../assets/home/bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 30px;
  box-sizing: border-box;

  .profit_top {
    width: 100%;
    height: 50%;
    margin-bottom: 17px;
  }

  .profit_button {
    width: 100%;
    flex: 1;
    // height: 50%;
  }
}
</style>